<template>
  <span ref="cou"></span>
</template>
<script>
import CountUp from 'countup.js';

export default {
  data() {
    return {
      numAnim: null,
      startVal: 0,
      endVal: 0,
    };
  },
  props: {
    val: {
      type: Number,
      default: 0,
    },
    decimals: {
      type: Number,
      default: 0,
    },
    duration: {
      type: Number,
      default: 1,
    },
    options: {
      type: Object,
    },
  },
  mounted() {
    this.initCountUp();
  },
  watch: {
    val: {
      handler(v, ov = 0) {
        this.endVal = v;
        this.startVal = ov;
        this.initCountUp();
      },
      immediate: true,
    },
  },
  methods: {
    initCountUp() {
      this.numAnim = new CountUp(
        this.$refs.cou,
        this.startVal,
        this.endVal,
        this.decimals,
        this.duration,
        this.options,
      );
      this.numAnim.start();
    },
  },
};
</script>
